<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('疫情防控人员管理列表')" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            padding-right: 0px;
            padding-left: 0px;
        }
        .nav.nav-tabs li {
            padding: 0px;
        }
        .table>thead>tr>th { text-align: center;}
        .table>tbody>tr>th { text-align: center;}
    </style>
</head>
<body class="white-bg"  style="font-size: 16px">
<div class="container" id="permDiv" style="display: block;margin: 10px 5px 5px 5px;">
    <div class="nav nav-tabs navbar-fixed-top">
        <div class="row">
            <div class="col-xs-6" style="padding: 0px">
                <select class="form-control text-center"  style="font-size: 16px"  id="deptSelect" onchange="selectDeptSearch()"></select>
            </div>
            <div class="col-xs-6" style="padding: 0px">
                <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="addUser()">添加</button>
            </div>
        </div>
    </div>
    <div id="myTabContent" class="tab-content" style="text-align:center;background-color: white;padding-top: 30px;">
        <!--   人员列表         -->
        <div class="tab-pane fade in active" id="audited">
            <table class="table table-striped">
                <thead>
                <tr><th>序号</th><th>工号</th><th>姓名</th><th>操作</th></tr>
                </thead>
                <tbody id="userListBodyDiv"></tbody>
            </table>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "wxcp/epidemic/collect";
    $(function () {
        //请求部门列表
        $.get(prefix + "/aduit/deptList", function(result){
            if (result.data != null && result.data.length > 0) {
                var item = "<option value='-1'>全部部门</option>";
                $.each(result.data, function (i,m) {
                    item += "<option value="+m.deptId+">"+m.deptName+"</option>";
                })
                $('#deptSelect').append(item);
            }
        });
        //请求数据列表(-1默认全部)
        $.get(prefix + "/userManage/list/-1", function(result){
            if (result.data != null && result.data.length > 0) {
                var item = "";
                $.each(result.data, function (i,m) {
                    item += "<tr onclick='deleteRow("+m.userId+")'><td>"+(i+1)+"</td><td>"+m.userId+"</td><td>"+m.userName+"</td><td><button type='button' class='btn btn-primary btn-xs' style='font-size: 16px'>删除</button></td></tr>";
                })
                $('#userListBodyDiv').append(item);
            }
        });
    })
    //删除行数据
    function deleteRow(userId) {
        if (userId != null) {
            $.modal.confirm("确定移除该成员吗？", function() {
                $.get(prefix+"/userManage/delete/"+userId,function(result){
                    if (result.code == 0) {
                        window.location.reload();
                    }
                });
            });
        }
    }
    //下拉过滤列表数据
    function selectDeptSearch() {
        var deptId = $('#deptSelect').val();
        $.get(prefix + "/userManage/list/"+deptId, function(result){
            if (result.data != null && result.data.length > 0) {
                $('#userListBodyDiv').empty();
                var item = "";
                $.each(result.data, function (i,m) {
                    item += "<tr onclick='deleteRow("+m.userId+")'><td>"+(i+1)+"</td><td>"+m.userId+"</td><td>"+m.userName+"</td><td><button type='button' class='btn btn-primary btn-xs' style='font-size: 16px'>删除</button></td></tr>";
                })
                $('#userListBodyDiv').append(item);
            }
        });
    }
    //添加用户界面
    function addUser() {
        var deptId = $('#deptSelect').val();
        if (deptId == -1)  {
            $.modal.alertWarning("你不能选择'全部',请选择具体的部门!");
            return;
        } else {
            window.location.href = prefix + "/userManage/add/"+deptId;
        }
    }
</script>
</body>
</html>
